<template>
  <!-- ditu -->
  <div class="div-main">
    <div id="bg">
      <!-- <img src="../../../asset/images/地图@2x.png" alt="" /> -->
    </div>
    <div class="list">
      <div class="choose">
        <div class="list-box">
          <div class="choose-area">
            <div class="province input" style="width: 50%; height: 30%">
              <span>省份:</span>
              <el-select
                v-model="someThing.province"
                placeholder="选择省份"
                popper-class="eloption"
                class="el-select"
                @change="choose"
              >
                <el-option-group
                  v-for="group in options1"
                  :key="group.label"
                  :label="group.label"
                >
                  <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-option-group>
              </el-select>
            </div>
            <div class="city input" style="width: 50%; height: 30%">
              <span>市区:</span>
              <el-select
                v-model="someThing.city"
                placeholder="选择市区"
                popper-class="eloption"
                @change="choose"
              >
                <el-option-group
                  v-for="group in options2"
                  :key="group.label"
                  :label="group.label"
                  class="city-innerHTML"
                >
                  <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-option-group>
              </el-select>
            </div>
            <div class="road input" style="width: 50%; height: 30%">
              <span>街道:</span>
              <el-select
                v-model="someThing.road"
                placeholder="选择街道"
                popper-class="eloption"
                @change="change"
              >
                <el-option-group
                  v-for="group in options3"
                  :key="group.label"
                  :label="group.label"
                >
                  <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-option-group>
              </el-select>
            </div>
            <label for="" style="width: 50%; height: 30%"></label>
          </div>
          <div class="content">
            <ul>
              <li v-for="item in list">
                <span class="title">{{ item.cityArea }}</span>
                <span class="other">{{ item.roadName }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="route">
        <div class="title">路线提交</div>
        <div class="place" style="width: 100%; height: 50%">
          <div class="start input" style="width: 50%; height: 30%">
            <span>起点:</span>
            <el-select
              v-model="value"
              placeholder="选择街道"
              popper-class="eloption"
            >
              <el-option-group
                v-for="group in options1"
                :key="group.label"
                :label="group.label"
              >
                <el-option
                  v-for="item in group.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-option-group>
            </el-select>
          </div>
          <div class="input" style="width: 50%; height: 30%">
            <span>终点:</span>
            <el-select
              v-model="value"
              placeholder="选择街道"
              popper-class="eloption"
            >
              <el-option-group
                v-for="group in options1"
                :key="group.label"
                :label="group.label"
              >
                <el-option
                  v-for="item in group.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-option-group>
            </el-select>
          </div>
        </div>
        <div class="ill" style="width: 100%; height: 30%">
          <ul>
            <li>
              <span>重点巡查区段</span
              ><img src="../../../asset/images/重点 拷贝.png" alt="" />
            </li>
            &nbsp;
            <li>
              <span>待巡查区段</span
              ><img src="../../../asset/images/重点 拷贝 2.png" alt="" />
            </li>
            <li>
              <span>已巡查区段</span
              ><img src="../../../asset/images/重点 拷贝 3.png" alt="" />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, reactive } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";
import "@/mock/cityList.js";
import { citylistApi } from "../../../api/api";

// let fn: any;
let map: any;

// 获取数据
const list = ref<any>([]);
const someThing = reactive({
  province: "",
  city: "",
  road: "",
});

const getData = async () => {
  const queryData = {
    someThing,
  };

  const res = await citylistApi(queryData);
  list.value = res.data.result;
};

const change = () => {
  if (someThing.province === "浙江省") {
    if (someThing.city === "杭州市") {
      if (someThing.road === "拱墅区") {
        X.value = "120.14";
        Y.value = "30.31";
        Z.value = "15";
        fn();
      }
    }
  }
  getData();
  console.log(123);
};

const value = ref("");
const options1 = [
  {
    label: "省份",
    options: [
      {
        value: "江苏省",
        label: "江苏省",
      },
      {
        value: "浙江省",
        label: "浙江省",
      },
    ],
  },
];
const options2 = [
  {
    label: "市区",
    options: [
      {
        value: "杭州市",
        label: "杭州市",
      },
      {
        value: "温州市",
        label: "温州市",
      },
    ],
  },
];
const options3 = [
  {
    label: "街道",
    options: [
      {
        value: "拱墅区",
        label: "拱墅区",
      },
      {
        value: "下城区",
        label: "下城区",
      },
      {
        value: "萧山区",
        label: "萧山区",
      },
      {
        value: "上城区",
        label: "上城区",
      },
    ],
  },
];
onBeforeUnmount(() => {
  map.destroy();
});

let X = ref<string>("116.412");
let Y = ref<string>("39.92");
let Z = ref<string>("8");
// console.log(X.value);
// console.log(Y.value);
// 改变坐标
const choose = () => {
  if (someThing.province === "浙江省") {
    X.value = "120.22";
    Y.value = "30.21";
    Z.value = "8";
    if (someThing.city === "杭州市") {
      X.value = "120.22";
      Y.value = "30.21";
      Z.value = "10";
      fn();
    }
    fn();
  }
};

const fn = () => {
  AMapLoader.load({
    key: "3e124c40789bd0db277d344172c13c74", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap: any) => {
      map = new AMap.Map("bg", {
        zoom: Z.value, //级别
        center: [X.value, Y.value], //中心点坐标
      });

      const circle = new AMap.Circle({
        center: new AMap.LngLat(X.value, Y.value), // 圆心位置
        radius: 1000, // 圆半径
        fillColor: "#ff000033", // 圆形填充颜色
        strokeColor: "transparent", // 描边颜色
        strokeWeight: 2, // 描边宽度
      });

      map.add(circle);

      const circle2 = new AMap.Circle({
        center: new AMap.LngLat(X.value, Y.value), // 圆心位置
        radius: 500, // 圆半径
        fillColor: "red", // 圆形填充颜色
        strokeColor: "transparent", // 描边颜色
        strokeWeight: 2, // 描边宽度
      });

      map.add(circle2);
    })
    .catch((e: any) => {
      console.log(e);
    });
};

onMounted(() => {
  fn();
  getData();
});
</script>

<style lang="less" scoped>
.div-main {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  #bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .list {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    display: flex;
    z-index: 2;
    flex-direction: column;
    padding: 2%;
    .choose {
      width: 100%;
      flex: 2;
      background-color: transparent;

      .list-box {
        background-color: rgba(255, 255, 255, 0.8);
        margin-bottom: 10%;
        border-radius: 5%;
        padding-top: 5%;
        padding-bottom: 5%;
        .choose-area {
          border-radius: 5%;
          height: 20%;
          width: 100%;
          padding: 1%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-evenly;
          align-items: center;

          .input {
            display: flex;
            margin-bottom: 2%;
            align-items: center;
            justify-content: center;
            span {
              display: inline-block;
              width: 20%;
              font-size: 1vh;
              text-align: center;
              color: #09003a;
              font-family: "Adobe Heiti Std";
              font-weight: 600;
            }
            :deep(.el-input__wrapper) {
              background-color: transparent;
            }
          }
          .el-select {
            height: 100%;
            width: 80%;
            ::v-deep .el-input__inner {
              height: 80%;
            }
          }
        }

        .content {
          width: 100%;
          height: 75%;

          ul {
            height: 100%;
            width: 100%;

            li:hover {
              background-color: rgba(96, 145, 203, 1);
              transform: scale(1.2);
            }
            li:hover .title,
            li:hover .other {
              color: #fff;
              font-weight: 500;
              border-radius: 5%;
            }
            li {
              height: 18%;
              background: #ffffff;
              box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.2);
              border-radius: 10px;
              margin: 5%;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              padding: 2%;
              .title {
                color: #827a82;
                font-weight: 550;
                font-family: "HiraginoSansGB-W3";
                font-size: 2vh;
              }
              .other {
                color: #827a82;
                font-family: "HiraginoSansGB-W3";
                font-size: 1vh;
              }
            }
          }
        }
      }
    }
    .route {
      width: 100%;
      height: 25%;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 8%;
      display: flex;
      flex-direction: column;
      padding: 2%;
      .title {
        height: 5vh;
        width: 100%;
        font-size: 2vh;
        font-weight: 600;
        line-height: 5vh;
        color: #000;
        text-indent: 1vw;
      }
      .place {
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        .input {
          display: flex;
          margin-bottom: 2%;
          align-items: center;
          justify-content: center;
          span {
            display: inline-block;
            width: 30%;
            font-size: 1vh;
            text-align: center;
            color: #09003a;
            font-family: "Adobe Heiti Std";
            font-weight: 600;
          }
          .el-select {
            width: 70%;
            height: 100%;
            ::v-deep .el-input__inner {
              height: 80%;
            }
          }
        }
      }
      .ill {
        background: #ffffff;
        box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        ul {
          width: 100%;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          height: 100%;
          li {
            width: 30%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              display: inline-block;
              width: 70%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            img {
              width: 25%;
              height: 70%;
            }
          }
        }
      }
    }
  }
}
</style>
